<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="yingyang">
    <div class="content">
      <Transition name="animate-zoomIn">
        <img v-show="show" class="logo" src="https://public-oss-file.zmaxfilm.com/website-compress/yingyang-title.png"
          alt="">
      </Transition>
      <div class="zuimeidianying">
        <Transition name="animate-fadeInLeft">
          <img v-show="show" class="img" src="https://public-oss-file.zmaxfilm.com/website-compress/image-18.png" alt="">
        </Transition>
        <Transition name="animate-fadeInRight">
          <div v-show="show" class="flex flex-col space-y-[30px]">
            <p class="intro leading-[36px]">
              最美科技旗下自主研发产品“影氧”，是一款集齐券包、分销、异业合作等功能，为影城量身定制的数字化运营SaaS工具，协助影城在各种营销中赋能完成分销裂变目标，实现客流、营业额的双增量。我们有着丰富的影城客户资源，与横店、大地、幸福蓝海、博纳等头部影投以及全国各大影投均有业务合作，并与各大银行、电商平台、游戏、电影宣发等渠道建立深度的业务结合。
            </p>
            <div class="flex justify-between">
              <div class="flex flex-1 items-center flex-col text-999 text-[16px] flex-shrink-0">
                <img class="w-[68px] h-[68px] mb-[10px]"
                  src="https://public-oss-file.zmaxfilm.com/website-compress/yingyang-1.png" alt="">
                <span>自有会员SaaS</span>
                <span>工具服务商</span>
              </div>
              <div class="flex flex-1 items-center flex-col text-999 text-[16px] flex-shrink-0">
                <img class="w-[68px] h-[68px] mb-[10px]"
                  src="https://public-oss-file.zmaxfilm.com/website-compress/yingyang-2.png" alt="">
                <span>互联网中台</span>
                <span>软件服务提供商</span>
              </div>
              <div class="flex flex-1 items-center flex-col text-999 text-[16px] flex-shrink-0">
                <img class="w-[68px] h-[68px] mb-[10px]"
                  src="https://public-oss-file.zmaxfilm.com/website-compress/yingyang-3.png" alt="">
                <span>电影卡券等营销类</span>
                <span>产品提供商</span>
              </div>
              <div class="flex flex-1 items-center flex-col text-999 text-[16px] flex-shrink-0">
                <img class="w-[68px] h-[68px] mb-[10px]"
                  src="https://public-oss-file.zmaxfilm.com/website-compress/yingyang-4.png" alt="">
                <span>丰富的影城及</span>
                <span class="whitespace-nowrap">票务平台运营经验沉淀</span>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.yingyang {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    display: flex;
    flex-direction: column;

    .intro {
      color: #666666;
      font-size: 18px;
      font-weight: 500;
    }

    .logo {
      width: 359px;
      height: 72px;
      margin: 0 auto 45px auto;
    }

    .zuimeidianying {
      gap: 46px;
      display: flex;
      position: relative;
      min-height: 400px;

      .img {
        width: 529px;
        height: 400px;
      }

      .float-card {
        display: flex;
        align-items: center;

        .item {
          flex: 1;
          gap: 20px;
          display: flex;
          flex-shrink: 0;
          position: relative;
          align-items: center;
          flex-direction: column;

          &::after {
            right: 0;
            width: 1px;
            height: 48px;
            content: '';
            position: absolute;
            background-color: #CCCCCC;
          }

          &:last-child::after {
            content: none;
          }
        }
      }
    }
  }
}
</style>
